<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>群组管理 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #10B981;
      --danger: #EF4444;
      --warning: #F59E0B;
      --light: #F9FAFB;
      --dark: #1F2937;
      --light-gray: #E5E7EB;
      --dark-gray: #6B7280;
      --white: #FFFFFF;
      --border-light: #E5E7EB;
      --border-dark: #374151;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      height: 100vh;
      overflow-x: hidden;
      margin: 0;
    }
    
    /* 页面容器 */
    .group-management-page {
      display: none;
      height: 100vh;
      flex-direction: column;
    }
    
    .group-management-page.active {
      display: flex;
    }
    
    /* 顶部导航 */
    .page-header {
      padding: 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .dark .page-header {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      flex: 1;
      text-align: center;
    }
    
    .dark .header-title {
      color: var(--white);
    }
    
    .header-action {
      color: var(--dark);
      background: none;
      border: none;
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .dark .header-action {
      color: var(--white);
    }
    
    .back-btn {
      color: var(--dark);
      background: none;
      border: none;
      font-size: 20px;
      padding: 4px;
    }
    
    .dark .back-btn {
      color: var(--white);
    }
    
    /* 群组头部信息 */
    .group-header {
      padding: 20px 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .dark .group-header {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .group-avatar {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .group-info {
      flex: 1;
      min-width: 0;
    }
    
    .group-name {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .dark .group-name {
      color: var(--white);
    }
    
    .group-meta {
      font-size: 14px;
      color: var(--dark-gray);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .dark .group-meta {
      color: #9CA3AF;
    }
    
    /* 主要内容区域 */
    .page-content {
      flex: 1;
      overflow-y: auto;
      background-color: var(--white);
    }
    
    .dark .page-content {
      background-color: #111827;
    }
    
    /* 管理选项区域 */
    .management-options {
      padding: 16px;
    }
    
    .option-section {
      margin-bottom: 24px;
      border-radius: 12px;
      overflow: hidden;
    }
    
    .section-title {
      font-size: 14px;
      color: var(--dark-gray);
      padding: 0 16px 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .dark .section-title {
      color: #9CA3AF;
    }
    
    .option-list {
      display: flex;
      flex-direction: column;
    }
    
    .option-item {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border-light);
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    
    .option-item:last-child {
      border-bottom: none;
    }
    
    .option-item:hover {
      background-color: var(--light);
    }
    
    .dark .option-item {
      border-bottom-color: var(--border-dark);
    }
    
    .dark .option-item:hover {
      background-color: #1F2937;
    }
    
    .option-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background-color: rgba(59, 130, 246, 0.1);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .option-icon.warning {
      background-color: rgba(245, 158, 11, 0.1);
      color: var(--warning);
    }
    
    .option-icon.danger {
      background-color: rgba(239, 68, 68, 0.1);
      color: var(--danger);
    }
    
    .option-icon.secondary {
      background-color: rgba(16, 185, 129, 0.1);
      color: var(--secondary);
    }
    
    .option-info {
      flex: 1;
      min-width: 0;
    }
    
    .option-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .dark .option-title {
      color: var(--white);
    }
    
    .option-desc {
      font-size: 13px;
      color: var(--dark-gray);
    }
    
    .dark .option-desc {
      color: #9CA3AF;
    }
    
    .option-action {
      color: var(--dark-gray);
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .dark .option-action {
      color: #9CA3AF;
    }
    
    /* 群成员列表 */
    .member-list {
      padding: 0 16px 16px;
    }
    
    .member-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-light);
    }
    
    .member-item:last-child {
      border-bottom: none;
    }
    
    .dark .member-item {
      border-bottom-color: var(--border-dark);
    }
    
    .member-avatar {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 14px;
      flex-shrink: 0;
    }
    
    .member-info {
      flex: 1;
      min-width: 0;
    }
    
    .member-name {
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .dark .member-name {
      color: var(--white);
    }
    
    .member-role {
      font-size: 13px;
      color: var(--primary);
      background-color: rgba(59, 130, 246, 0.1);
      padding: 2px 6px;
      border-radius: 4px;
      display: inline-block;
    }
    
    .dark .member-role {
      background-color: rgba(59, 130, 246, 0.2);
    }
    
    .member-status {
      font-size: 13px;
      color: var(--dark-gray);
    }
    
    .dark .member-status {
      color: #9CA3AF;
    }
    
    .member-action {
      color: var(--dark-gray);
      font-size: 18px;
      background: none;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .dark .member-action {
      color: #9CA3AF;
    }
    
    /* 开关样式 */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 26px;
    }
    
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--light-gray);
      transition: .3s;
      border-radius: 26px;
    }
    
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }
    
    input:checked + .toggle-slider {
      background-color: var(--primary);
    }
    
    input:checked + .toggle-slider:before {
      transform: translateX(24px);
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 100;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .dark .style-switcher {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .switcher-header {
      border-bottom-color: var(--border-dark);
      color: var(--white);
    }
    
    .style-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .style-option:hover {
      background-color: var(--light);
    }
    
    .dark .style-option {
      color: var(--white);
    }
    
    .dark .style-option:hover {
      background-color: #374151;
    }
    
    .style-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 卡片风格 */
    .card-style .option-section {
      background-color: var(--white);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin: 0 16px 16px;
    }
    
    .card-style .section-title {
      padding: 16px 16px 8px;
      background-color: transparent;
      margin-bottom: 0;
    }
    
    .card-style .option-list {
      padding: 8px 0;
    }
    
    .card-style .page-content {
      background-color: var(--light);
      padding-top: 16px;
    }
    
    .card-style .member-list {
      background-color: var(--white);
      border-radius: 12px;
      margin: 0 16px 16px;
      padding: 16px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .card-style.dark .option-section,
    .card-style.dark .member-list {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    .card-style.dark .page-content {
      background-color: var(--dark);
    }
    
    /* 简约风格 */
    .minimal-style .page-header {
      padding: 12px 16px;
    }
    
    .minimal-style .group-header {
      padding: 16px;
    }
    
    .minimal-style .group-avatar {
      width: 56px;
      height: 56px;
    }
    
    .minimal-style .option-item {
      padding: 12px 16px;
    }
    
    .minimal-style .option-icon {
      width: 32px;
      height: 32px;
      font-size: 14px;
    }
    
    .minimal-style .member-item {
      padding: 10px 0;
    }
    
    .minimal-style .member-avatar {
      width: 44px;
      height: 44px;
    }
    
    .minimal-style .section-title {
      display: none;
    }
    
    /* 深色模式 */
    .dark {
      background-color: var(--dark);
    }
    
    /* 弹窗样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 16px;
    }
    
    .modal-overlay.active {
      display: flex;
    }
    
    .modal {
      background-color: var(--white);
      border-radius: 16px;
      width: 100%;
      max-width: 400px;
      overflow: hidden;
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.3s ease;
    }
    
    .modal-overlay.active .modal {
      transform: translateY(0);
      opacity: 1;
    }
    
    .dark .modal {
      background-color: #1F2937;
    }
    
    .modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .dark .modal-header {
      border-bottom-color: var(--border-dark);
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .dark .modal-title {
      color: var(--white);
    }
    
    .modal-close {
      background: none;
      border: none;
      color: var(--dark-gray);
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .dark .modal-close {
      color: #9CA3AF;
    }
    
    .modal-body {
      padding: 20px;
    }
    
    .modal-footer {
      padding: 12px 20px;
      border-top: 1px solid var(--border-light);
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }
    
    .dark .modal-footer {
      border-top-color: var(--border-dark);
    }
    
    .modal-btn {
      padding: 8px 16px;
      border-radius: 8px;
      font-weight: 500;
      font-size: 15px;
      border: none;
      cursor: pointer;
    }
    
    .modal-btn-secondary {
      background-color: var(--light);
      color: var(--dark);
    }
    
    .dark .modal-btn-secondary {
      background-color: #374151;
      color: var(--white);
    }
    
    .modal-btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .modal-btn-danger {
      background-color: var(--danger);
      color: white;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .option-item, .member-item {
      animation: fadeIn 0.2s ease forwards;
    }
    
    .option-item:nth-child(1) { animation-delay: 0.05s; }
    .option-item:nth-child(2) { animation-delay: 0.1s; }
    .option-item:nth-child(3) { animation-delay: 0.15s; }
    .option-item:nth-child(4) { animation-delay: 0.2s; }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">页面样式</div>
    <div class="style-option active" data-style="default">默认样式</div>
    <div class="style-option" data-style="dark">深色模式</div>
    <div class="style-option" data-style="card">卡片风格</div>
    <div class="style-option" data-style="minimal">简约风格</div>
  </div>
  
  <!-- 默认样式页面 -->
  <div class="group-management-page active" id="defaultPage">
    <!-- 顶部导航 -->
    <div class="page-header">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <div class="header-title">群组管理</div>
      <button class="header-action" aria-label="更多选项">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </div>
    
    <!-- 群组头部信息 -->
    <div class="group-header">
      <img src="https://picsum.photos/id/237/200/200" alt="设计交流群" class="group-avatar">
      <div class="group-info">
        <div class="group-name">设计交流群</div>
        <div class="group-meta">
          <span><i class="fa fa-users"></i> 128名成员</span>
          <span><i class="fa fa-lock"></i> 公开群</span>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="page-content">
      <!-- 群组设置选项 -->
      <div class="management-options">
        <div class="option-section">
          <div class="section-title">群组设置</div>
          <div class="option-list">
            <div class="option-item" id="editGroupInfo">
              <div class="option-icon">
                <i class="fa fa-info"></i>
              </div>
              <div class="option-info">
                <div class="option-title">群组信息</div>
                <div class="option-desc">编辑群组名称、描述和头像</div>
              </div>
              <div class="option-action">
                <i class="fa fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="option-item">
              <div class="option-icon secondary">
                <i class="fa fa-bell"></i>
              </div>
              <div class="option-info">
                <div class="option-title">消息通知</div>
                <div class="option-desc">设置群组消息通知方式</div>
              </div>
              <label class="toggle-switch">
                <input type="checkbox" checked>
                <span class="toggle-slider"></span>
              </label>
            </div>
            
            <div class="option-item">
              <div class="option-icon secondary">
                <i class="fa fa-shield"></i>
              </div>
              <div class="option-info">
                <div class="option-title">隐私设置</div>
                <div class="option-desc">管理群组可见性和加入权限</div>
              </div>
              <div class="option-action">
                <i class="fa fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="option-item">
              <div class="option-icon">
                <i class="fa fa-search"></i>
              </div>
              <div class="option-info">
                <div class="option-title">群内搜索</div>
                <div class="option-desc">搜索群聊记录和成员</div>
              </div>
              <div class="option-action">
                <i class="fa fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </div>
        
        <div class="option-section">
          <div class="section-title">成员管理</div>
          <div class="option-list">
            <div class="option-item" id="inviteMembers">
              <div class="option-icon secondary">
                <i class="fa fa-user-plus"></i>
              </div>
              <div class="option-info">
                <div class="option-title">邀请成员</div>
                <div class="option-desc">通过链接或直接邀请好友加入</div>
              </div>
              <div class="option-action">
                <i class="fa fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="option-item" id="manageAdmins">
              <div class="option-icon">
                <i class="fa fa-star"></i>
              </div>
              <div class="option-info">
                <div class="option-title">管理员设置</div>
                <div class="option-desc">管理群组管理员权限</div>
              </div>
              <div class="option-action">
                <i class="fa fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="option-item" id="muteMembers">
              <div class="option-icon warning">
                <i class="fa fa-volume-off"></i>
              </div>
              <div class="option-info">
                <div class="option-title">禁言管理</div>
                <div class="option-desc">管理被禁言的群成员</div>
              </div>
              <div class="option-action">
                <i class="fa fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </div>
        
        <div class="option-section">
          <div class="section-title">高级选项</div>
          <div class="option-list">
            <div class="option-item" id="clearHistory">
              <div class="option-icon warning">
                <i class="fa fa-trash"></i>
              </div>
              <div class="option-info">
                <div class="option-title">清空聊天记录</div>
                <div class="option-desc">删除本地所有群聊记录</div>
              </div>
              <div class="option-action">
                <i class="fa fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="option-item" id="leaveGroup">
              <div class="option-icon danger">
                <i class="fa fa-sign-out"></i>
              </div>
              <div class="option-info">
                <div class="option-title">退出群组</div>
                <div class="option-desc">离开后将不再接收群消息</div>
              </div>
              <div class="option-action">
                <i class="fa fa-chevron-right"></i>
              </div>
            </div>
            
            <div class="option-item" id="dissolveGroup" style="display: none;">
              <div class="option-icon danger">
                <i class="fa fa-ban"></i>
              </div>
              <div class="option-info">
                <div class="option-title">解散群组</div>
                <div class="option-desc">仅群主可操作，解散后不可恢复</div>
              </div>
              <div class="option-action">
                <i class="fa fa-chevron-right"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 群成员列表 -->
      <div class="section-title" style="padding-left: 16px;">群成员</div>
      <div class="member-list">
        <div class="member-item">
          <img src="https://picsum.photos/id/64/200/200" alt="张设计师" class="member-avatar">
          <div class="member-info">
            <div class="member-name">张设计师</div>
            <div class="member-role">群主</div>
          </div>
          <button class="member-action" aria-label="更多操作">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
        
        <div class="member-item">
          <img src="https://picsum.photos/id/91/200/200" alt="李小明" class="member-avatar">
          <div class="member-info">
            <div class="member-name">李小明</div>
            <div class="member-role">管理员</div>
          </div>
          <button class="member-action" aria-label="更多操作">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
        
        <div class="member-item">
          <img src="https://picsum.photos/id/26/200/200" alt="王大锤" class="member-avatar">
          <div class="member-info">
            <div class="member-name">王大锤</div>
            <div class="member-status">在线</div>
          </div>
          <button class="member-action" aria-label="更多操作">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
        
        <div class="member-item">
          <img src="https://picsum.photos/id/65/200/200" alt="赵小丽" class="member-avatar">
          <div class="member-info">
            <div class="member-name">赵小丽</div>
            <div class="member-status">在线</div>
          </div>
          <button class="member-action" aria-label="更多操作">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
        
        <div class="member-item">
          <img src="https://picsum.photos/id/177/200/200" alt="阿强" class="member-avatar">
          <div class="member-info">
            <div class="member-name">阿强</div>
            <div class="member-status">离线 2小时</div>
          </div>
          <button class="member-action" aria-label="更多操作">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 深色模式页面 -->
  <div class="group-management-page dark" id="darkPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 卡片风格页面 -->
  <div class="group-management-page card-style" id="cardPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 简约风格页面 -->
  <div class="group-management-page minimal-style" id="minimalPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 退出群组确认弹窗 -->
  <div class="modal-overlay" id="leaveGroupModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">退出群组</div>
        <button class="modal-close" id="closeLeaveModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <p>确定要退出"设计交流群"吗？退出后将不再接收该群的消息，也无法查看群聊历史。</p>
      </div>
      <div class="modal-footer">
        <button class="modal-btn modal-btn-secondary" id="cancelLeave">取消</button>
        <button class="modal-btn modal-btn-danger" id="confirmLeave">确认退出</button>
      </div>
    </div>
  </div>
  
  <!-- 解散群组确认弹窗 -->
  <div class="modal-overlay" id="dissolveGroupModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">解散群组</div>
        <button class="modal-close" id="closeDissolveModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <p>确定要解散"设计交流群"吗？此操作不可撤销，群组内所有聊天记录将被删除，所有成员将被移出群组。</p>
      </div>
      <div class="modal-footer">
        <button class="modal-btn modal-btn-secondary" id="cancelDissolve">取消</button>
        <button class="modal-btn modal-btn-danger" id="confirmDissolve">确认解散</button>
      </div>
    </div>
  </div>
  
  <!-- 清空记录确认弹窗 -->
  <div class="modal-overlay" id="clearHistoryModal">
    <div class="modal">
      <div class="modal-header">
        <div class="modal-title">清空聊天记录</div>
        <button class="modal-close" id="closeClearModal">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="modal-body">
        <p>确定要清空本地的群聊记录吗？此操作仅删除本地记录，不会影响其他群成员。</p>
      </div>
      <div class="modal-footer">
        <button class="modal-btn modal-btn-secondary" id="cancelClear">取消</button>
        <button class="modal-btn modal-btn-primary" id="confirmClear">确认清空</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 复制内容到其他样式页面
    const defaultPage = document.getElementById('defaultPage');
    document.getElementById('darkPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('cardPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('minimalPage').innerHTML = defaultPage.innerHTML;
    
    // 获取DOM元素
    const styleOptions = document.querySelectorAll('.style-option');
    const pageContainers = document.querySelectorAll('.group-management-page');
    const backButtons = document.querySelectorAll('.back-btn');
    const moreActionButtons = document.querySelectorAll('.header-action:last-child');
    const leaveGroupBtn = document.getElementById('leaveGroup');
    const dissolveGroupBtn = document.getElementById('dissolveGroup');
    const clearHistoryBtn = document.getElementById('clearHistory');
    const leaveGroupModal = document.getElementById('leaveGroupModal');
    const dissolveGroupModal = document.getElementById('dissolveGroupModal');
    const clearHistoryModal = document.getElementById('clearHistoryModal');
    const closeLeaveModal = document.getElementById('closeLeaveModal');
    const closeDissolveModal = document.getElementById('closeDissolveModal');
    const closeClearModal = document.getElementById('closeClearModal');
    const cancelLeave = document.getElementById('cancelLeave');
    const cancelDissolve = document.getElementById('cancelDissolve');
    const cancelClear = document.getElementById('cancelClear');
    const confirmLeave = document.getElementById('confirmLeave');
    const confirmDissolve = document.getElementById('confirmDissolve');
    const confirmClear = document.getElementById('confirmClear');
    const editGroupInfoBtn = document.getElementById('editGroupInfo');
    const inviteMembersBtn = document.getElementById('inviteMembers');
    const manageAdminsBtn = document.getElementById('manageAdmins');
    const muteMembersBtn = document.getElementById('muteMembers');
    
    // 当前激活的样式索引
    let currentStyleIndex = 0;
    
    // 切换页面样式
    styleOptions.forEach((option, index) => {
      option.addEventListener('click', function() {
        // 更新样式选项的活跃状态
        styleOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 隐藏当前页面
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 显示选中的页面
        const styleId = this.getAttribute('data-style') + 'Page';
        document.getElementById(styleId).classList.add('active');
        
        // 更新当前样式索引
        currentStyleIndex = index;
        
        // 更新按钮引用
        updateButtonReferences();
      });
    });
    
    // 更新按钮引用（切换样式后）
    function updateButtonReferences() {
      const activePage = document.querySelector('.group-management-page.active');
      
      // 重新绑定返回按钮事件
      const backBtn = activePage.querySelector('.back-btn');
      if (backBtn) {
        backBtn.addEventListener('click', goBack);
      }
      
      // 重新绑定更多操作按钮事件
      const moreBtn = activePage.querySelector('.header-action:last-child');
      if (moreBtn) {
        moreBtn.addEventListener('click', showMoreOptions);
      }
      
      // 重新绑定管理选项事件
      const leaveBtn = activePage.querySelector('#leaveGroup');
      if (leaveBtn) {
        leaveBtn.addEventListener('click', openLeaveGroupModal);
      }
      
      const dissolveBtn = activePage.querySelector('#dissolveGroup');
      if (dissolveBtn) {
        dissolveBtn.addEventListener('click', openDissolveGroupModal);
      }
      
      const clearBtn = activePage.querySelector('#clearHistory');
      if (clearBtn) {
        clearBtn.addEventListener('click', openClearHistoryModal);
      }
      
      const editInfoBtn = activePage.querySelector('#editGroupInfo');
      if (editInfoBtn) {
        editInfoBtn.addEventListener('click', editGroupInfo);
      }
      
      const inviteBtn = activePage.querySelector('#inviteMembers');
      if (inviteBtn) {
        inviteBtn.addEventListener('click', inviteMembers);
      }
      
      const manageAdmins = activePage.querySelector('#manageAdmins');
      if (manageAdmins) {
        manageAdmins.addEventListener('click', manageAdministrators);
      }
      
      const muteBtn = activePage.querySelector('#muteMembers');
      if (muteBtn) {
        muteBtn.addEventListener('click', manageMutedMembers);
      }
      
      // 重新绑定成员操作按钮事件
      activePage.querySelectorAll('.member-action').forEach(btn => {
        btn.addEventListener('click', showMemberActions);
      });
      
      // 重新绑定弹窗关闭按钮事件
      setupModalEvents(activePage);
    }
    
    // 设置弹窗事件
    function setupModalEvents(activePage) {
      // 关闭弹窗的通用函数
      function closeModal(modalId) {
        const modal = document.getElementById(modalId);
        modal.classList.remove('active');
      }
      
      // 为当前页面的弹窗按钮绑定事件
      if (activePage.id === 'defaultPage') {
        closeLeaveModal.addEventListener('click', () => closeModal('leaveGroupModal'));
        cancelLeave.addEventListener('click', () => closeModal('leaveGroupModal'));
        closeDissolveModal.addEventListener('click', () => closeModal('dissolveGroupModal'));
        cancelDissolve.addEventListener('click', () => closeModal('dissolveGroupModal'));
        closeClearModal.addEventListener('click', () => closeModal('clearHistoryModal'));
        cancelClear.addEventListener('click', () => closeModal('clearHistoryModal'));
      }
    }
    
    // 返回功能
    function goBack() {
      alert('返回群组聊天界面');
    }
    
    // 显示更多选项
    function showMoreOptions() {
      alert('显示更多群组管理选项');
    }
    
    // 打开退出群组弹窗
    function openLeaveGroupModal() {
      leaveGroupModal.classList.add('active');
    }
    
    // 打开解散群组弹窗
    function openDissolveGroupModal() {
      dissolveGroupModal.classList.add('active');
    }
    
    // 打开清空记录弹窗
    function openClearHistoryModal() {
      clearHistoryModal.classList.add('active');
    }
    
    // 编辑群组信息
    function editGroupInfo() {
      alert('跳转到群组信息编辑页面');
    }
    
    // 邀请成员
    function inviteMembers() {
      alert('打开邀请成员界面');
    }
    
    // 管理管理员
    function manageAdministrators() {
      alert('打开管理员管理界面');
    }
    
    // 管理禁言成员
    function manageMutedMembers() {
      alert('打开禁言成员管理界面');
    }
    
    // 显示成员操作选项
    function showMemberActions(e) {
      e.stopPropagation();
      alert('显示成员操作选项（查看资料、发送消息、禁言等）');
    }
    
    // 确认退出群组
    confirmLeave.addEventListener('click', function() {
      leaveGroupModal.classList.remove('active');
      alert('已成功退出群组');
    });
    
    // 确认解散群组
    confirmDissolve.addEventListener('click', function() {
      dissolveGroupModal.classList.remove('active');
      alert('已成功解散群组');
    });
    
    // 确认清空记录
    confirmClear.addEventListener('click', function() {
      clearHistoryModal.classList.remove('active');
      alert('已成功清空本地聊天记录');
    });
    
    // 初始化事件绑定
    backButtons[0].addEventListener('click', goBack);
    moreActionButtons[0].addEventListener('click', showMoreOptions);
    leaveGroupBtn.addEventListener('click', openLeaveGroupModal);
    dissolveGroupBtn.addEventListener('click', openDissolveGroupModal);
    clearHistoryBtn.addEventListener('click', openClearHistoryModal);
    editGroupInfoBtn.addEventListener('click', editGroupInfo);
    inviteMembersBtn.addEventListener('click', inviteMembers);
    manageAdminsBtn.addEventListener('click', manageAdministrators);
    muteMembersBtn.addEventListener('click', manageMutedMembers);
    
    // 初始化成员操作按钮事件
    document.querySelectorAll('.member-action').forEach(btn => {
      btn.addEventListener('click', showMemberActions);
    });
    
    // 初始化弹窗关闭事件
    setupModalEvents(defaultPage);
  </script>
</body>
</html>
